import { createApp } from 'vue';

import 'lib-flexible';
import '@vant/touch-emulator';

import mitt from 'mitt';
import useClipboard from 'vue-clipboard3';

import App from './App.vue';
import components from './components/index';
import router from './router';
import store from './store';
import mixin from './libs/mixin';
import axiosUtil from './libs/axios-utils';
import { isMobile } from './libs/helpers';

import './assets/css/layout.less';
import './assets/css/menus.less';

let doc = window.document;
let docEl = doc.documentElement;
let width = docEl.getBoundingClientRect().width;

let handler = setInterval(() => {
  if (isMobile()) {
    clearInterval(handler);

    return;
  }

  if (width / dpr > 620) {
    width = 620 * dpr;
  }

  if (doc.readyState === 'complete') {
    docEl.style.fontSize = (width / 16) + 'px';
    doc.body.style.fontSize = 16 + 'px';

    clearInterval(handler);
  }
}, 100);

const emitter = mitt();
const { toClipboard } = useClipboard();

const app = createApp(App);

// 添加event bus
app.config.globalProperties.$eventBus = emitter;
app.config.globalProperties.$copyText = toClipboard;

app.provide('$eventBus', emitter);
app.provide('$copyText', toClipboard);

app.use(mixin)  // 添加混入
  .use(components) // 添加全局组件
  .use(store) // vuex支持
  .use(router) // 路由
  .use(axiosUtil) // 添加axios支持和axios请求拦截
  .mount('#app'); // 挂载
